<template>
    <div  :class="{'albumPage':loadOver}" class="albumIndex">
        <div class="banner" v-if="bannerList.length>0">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index ) in bannerList" :key="index" @click="toAlbumDetails(item.id,item.type)">
                        <div>
                            <img :src="item.photo_address&&item.photo_address[0]&&item.photo_address[0].photo_address"
                                 onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'"
                                 alt />
                        </div>
                        <div class="banner_title">
                            <span>{{item.describe}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--导航-->
        <div class="xuanchuan_nav">
            <ul>
                <li v-for="(item,index) in navList" :key="index" :class="status==item.id?'status':'' " @click="tabClick(item.id)"
                    :data-status="item.id">{{item.class_name}}
                </li>
            </ul>
        </div>
        <!--<Loading  v-if="notMore"  class="empty-text-wrap" />-->
        <!--<div class="empty-data" v-show="!navList.length">-->
            <!--<img src="../../../assets/img/quesheng_zanwuneirong@2x.png" alt="">-->
        <!--</div>-->
        <mu-paper :z-depth="1" class="demo-loadmore-wrap">
            <mu-container ref="container" class="demo-loadmore-content">
                <mu-load-more  :loading="loading" @load="load">
                    <div class="news_list">
                        <ul>
                            <li v-for="(item,index) in albumList" :key="index" @click="toAlbumDetails(item.id,item.type)"
                                :data-id="item.id">
                                <div>
                                    <div class="article3">
                                        <p class="article_title">{{item.title}}</p>
                                        <div class="article_img3">
                                            <img v-for="(items,indexs) in item.photo_address" v-show="indexs<3" :key="indexs"
                                                 :src="items.photo_address" alt
                                                 onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                                        </div>
                                        <p class="article_source">{{item.source}}</p>
                                        <div class="article_info">
                                            <span class="article_num"><img src="@as/img/eyes.png" alt="">{{item.is_collection_id}}人收藏</span>
                                            <span class="article_time">{{item.create_time | time }}</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </mu-load-more>
            </mu-container>
        </mu-paper>
        <div class="loading" v-if="loadOver">{{loaded}}</div>
    </div>
</template>


<script>
    import {mapState} from 'vuex'
    import Swiper from "swiper";
    // import Loading from '@/components/emptyText.vue';
    export default {
        data() {
            return {
                status: '',//副导航切换
                listData: [],
                num: 10,
                p: 1,
                notMore: false,
                method: "",
                loading: false,
                loaded: "加载更多...",
                navList: [],//二级分类
                albumList: [],//相册列表
                panelShow: false,//发布弹窗
                navsShow: false,//全部导航
                bannerList: [ ],
                loadOver:false,
            }
        },
        computed:{
            ...mapState({
                sub_class_obj:state =>state.initNews.sub_class_obj,
                selectedId:state =>state.initNews.sub_class_obj.selectedId,
            }),
        },
        components:{
            // Loading
        },
        mounted() {
            this.$progress.done();
            this.getBannerList();
        },
        methods: {
            toAlbumDetails(id,type) {
                this.$router.push({path: "details/albumDetails", query: {id}})
            },
            getBannerList(){
              this.$http.get('app/my/head_album',{
                  org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id,
              }).then((res)=>{
                  if(res.data.length){
                      this.bannerList =res.data;
                      console.log( this.bannerList)
                  }

              }).then((res)=>{
                  this.getNavList(this.p);
                  new Swiper(".swiper-container", {
                      loop: false,
                      autoplay: 1000,
                      slidesPerView: "auto",
                      centeredSlides: true,
                      spaceBetween: 10,

                  });
              })
            },
            /*
            * 副导航切换
            */
            tabClick(e) {
                this.status = e;
                this.p=1;
                this.loadOver=false;
                this.albumList=[];
                this.notMore =true;
                this.initData(this.p,this.status)
            },
            getModelCloumn(){
                // console.log(this.$store.commit.changeSubNav)
                this.$store.state.initNews.Navsenior.Navsenior.forEach((el,index)=>{
                    if(this.$store.state.initNews.selectName.selectName ==el.class_name){
                        this.$store.commit('changeSubNav',{
                            class_id:  this.$store.state.initNews.Navsenior.Navsenior[index].id,
                            status: this.$store.state.initNews.Navsenior.Navsenior[index].status,
                            selectedId: this.selectedId
                        })
                    }
                });
            },
            /*
            * 副导航
            * */
            getNavList() {
                if(this.$store.state.initNews.selectName.selectName){
                    this.getModelCloumn();
                    this.$http
                        .get("app/My/second_class", {
                            org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id,
                            status:2,
                            uid:50,
                            class_id:this.sub_class_obj.class_id,
                        })
                        .then(res => {
                            this.navList = res.data;
                            console.log(res.data.length)
                            if(res.data.length){
                                if(res.data[0]&&res.data[0].id){
                                    this.status =res.data[0].id;
                                    this.initData(this.p,this.status);
                                }else{
                                    this.notMore =false;
                                }
                            }
                        });
                }else{
                    this.$http
                        .get("app/My/second_class", {
                            org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id,
                            status:2,
                            uid:50,
                            class_id:this.sub_class_obj.class_id,
                        })
                        .then(res => {
                            this.navList = res.data;
                            if(res.data.length){
                                if(res.data[0]&&res.data[0].id){
                                    this.status =res.data[0].id;
                                    this.initData(this.p,this.status);
                                }else{
                                    this.notMore =false;
                                }
                            }
                        });
                }
            },
            toSearch() {
                this.$router.push({path: "details/search", query: {type: 2}})
            },
            /*
            * 相册列表
            */
            initData(p,class_id) {
                this.$http
                    .get("app/NewCustom/photo_list", {
                        p: p,
                        page: 10,
                        class_id,
                        org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id,
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                    })
                    .then(res => {

                        if(res.data.length){
                            this.albumList.push(...res.data);
                        }
                        this.loadOver =false;
                        if(p!=1){
                            console.log(res.data);
                            if(res.data.length){
                            }else{
                                this.loadOver =true;
                                this.loading =false;
                                this.loaded='没有更多数据了'
                                return false
                            }
                        }else {
                            if(!res.data.length){
                                this.notMore =true;
                                this.loadOver =false;
                            }else{
                                if(res.data.length<6&&res.data.length!=0){
                                    this.loadOver =true;
                                    this.notMore =false;
                                    this.loaded='没有更多数据了'
                                }
                            }
                        }

                        // console.log(res.data)
                        // if(res.data.length){
                        //     this.albumList.push(...res.data);
                        // }
                        // this.notMore = false;
                        // this.loadOver =false;
                        // if(p!=1){
                        //     console.log(res.data);
                        //     if(res.data.length){
                        //     }else{
                        //         this.loadOver =true;
                        //         this.loading =false;
                        //         this.loaded='没有更多数据了'
                        //         return false
                        //     }
                        // }else{
                        //     if(res.data.length<9){
                        //         this.loadOver =true;
                        //         this.loading =false;
                        //         this.loaded='没有更多数据了'
                        //         return false
                        //     }
                        // }
                    });
            },
            load() {
                //因为load 触发多次 所以做分时节流
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.initData(this.p,this.status);
                        this.loading =false;
                    }, 2000);
                }
            },
        },
    }
</script>

<style scoped>

    .albumIndex .empty-text-wrap{
        width: 100%;
        height: 40vh;
        margin-top: 100px;
    }
    p {
        margin: 0;
        padding: 0;
    }

    .banner {
        width: 375px;
        overflow: hidden;
        position: relative;
        /*margin-top: -3.5rem;*/
    }

    .swiper-container {
        margin-top: 10px;
        width: 375px;
        height: 160px;
        margin-bottom: 27px;
        overflow: visible !important;

    }

    .swiper-container .swiper-wrapper .swiper-slide {
        width: 310px;
        border-radius: 10px;
    }

    .swiper-container .swiper-wrapper .swiper-slide img {
        width: 100%;
        height: 160px;
        border-radius: 10px;
    }

    .swiper-container .swiper-wrapper .swiper-slide-prev {
        margin-top: 9px;
        height: 142px !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-prev img {
        height: 142px !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-next {
        margin-top: 9px;
        height: 142px !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-next img {
        height: 142px !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-active {
        width: 310px;
    }

    .swiper-pagination {
        bottom: -15px !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-prev .banner_title, .swiper-container .swiper-wrapper .swiper-slide-next .banner_title {
        display: none;
    }

    .banner_title {
        width: 100%;
        height: 76px;
        background: linear-gradient(0deg, rgba(3, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        /*opacity: 0.7;*/
        opacity: 1;
        border-radius: 4px;
        position: absolute;
        top: 87px;
    }

    .banner_title span {
        display: inline-block;
        width: 200px;
        margin-left: 16px;
        margin-top: 34px;
        font-size: 12px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .swiper-container .swiper-wrapper .swiper-slide .title_bg {
        position: absolute;
        bottom: -5px;
        right: 25px;
        width: 50px;
        height: 50px;
    }

    /*导航*/
    .xuanchuan_nav {
        width: 342px;
        height: auto;
        display: inline-block;
        margin: 0 16px;
    }

    .xuanchuan_nav ul {
        width: 342px;
        max-height: 80px;
        margin: 0 0 20px 0;
    }

    .xuanchuan_nav li {
        display: inline-block;
        /*width: 78px;*/
        height: 28px;
        border-radius: 14px;
        line-height: 28px;
        font-size: 12px;
        color: #999;
        margin-right: 9px;
        float: left;
        text-align: center;
        background: #F8F8F8;
        margin-top: 9px;
        padding: 0 10px;
    }

    .xuanchuan_nav li.status {
        color: #EB4D44;
    }

    .xuanchuan_nav li:nth-child(4) {
        margin-right: 0;
    }

    .xuanchuan_nav li:nth-child(8) {
        margin-right: 0;
    }

    /*新闻列表*/
    .news_list {
        max-width: 350px;
        overflow: hidden;
        margin: 0 auto;
        width: 100%;
        display: flex;
    }

    .news_list ul {
        width: 100%;
    }

    .news_list li {
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    .news_list li:last-child {
        border-bottom: none;
    }


    .article_title {
        max-height: 48px;
        width: 343px;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .article_source {
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
    }

    .article_info {
        display: inline-block;
        width: 100%;
        font-size: 12px;
        color: #999;
        margin-top: 10px;
    }

    .article_info .article_num {
        float: left;
    }

    .article_num img {
        width: 13px !important;
        height: 11px !important;
        display: inline-block;
        margin-right: 6px;

    }

    .article_info .article_time {
        float: right;
        margin-right: 15px;
    }


    /*3张图片*/
    .article3 {
        width: 360px !important;
        margin: 20px 0 0 0
    }

    .article_img3 {
        width: 100%;
        margin: 10px 0 0 0;
        overflow: hidden;
        display: flex;
    }

    .article_img3 img {
        width: 110px !important;
        height: 83px !important;
        border-radius: 4px;
        margin-right: 7px;
    }

    .article_img3 img:last-child {
        margin-right: 0;
    }

    .loading {
        width: 343px;
        margin: 0 16px ;
        font-size: 14px;
        color: #dddddd;
        clear: both;
        line-height: 61px;
        text-align: center;
    }
    .mu-load-more /deep/ .mu-circle-spinner{
        border-color: #e5e5e5;
    }
    .albumPage /deep/ .mu-infinite-scroll{
        display: none;
        height: 0;
    }
    .albumIndex /deep/.mu-elevation-1{
        box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
        -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
    }
    .empty-data{
        position: relative;
        width: 100%;
        min-height: 60vh;
        position: relative;
        /*background-image: url("../../../../assets/img/quesheng_zanwuneirong@2x.png");*/
        background-size: 100% 100%;
        background-repeat: no-repeat;

    }
    .empty-data img{
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

</style>